<template>
  <!-- 只能输入数字 -->
  <el-input v-model="value">
    <template #prepend v-if="slots.prepend">
      <slot name="prepend"></slot>
    </template>
    <template #append v-if="slots.append">
      <slot name="append"></slot>
    </template>
    <template #suffix v-if="slots.suffix">
      <slot name="suffix"></slot>
    </template>
    <template #prefix v-if="slots.prefix">
      <slot name="prefix"></slot>
    </template>
  </el-input>
</template>
<script setup>
import { ref, computed, useSlots } from "vue";
import { ElMessage } from "element-plus";
const slots = useSlots();
const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: "",
  },
});
const value = computed({
  get: () => {
    return props.modelValue;
  },
  set: (data) => {
    if (isNaN(data * 1)) {
      // 不是数字
      ElMessage.warning("请输入数字");
      emits("update:modelValue", "");
    } else {
      emits("update:modelValue", data);
    }
  },
});
</script>